<template>
  <div class="container">
    <div class="search">
      <el-form :inline="true"  label-width="68px" size="small">
      </el-form>
    </div>
    <div class="operation">
       <el-button type="primary" @click="search">搜索</el-button>
       <el-button type="primary" @click="handleAddFlashPromotion">添加</el-button>
    </div>
    <el-table :data="listData" style="width: 100%" :height="578">
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <el-table-column prop="startTime" label="开始时间">
      </el-table-column>
      <el-table-column prop="endTime" label="结束时间">
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="showFlashPromotionSessions(scope.row.id)">查看闪购商品设置</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.pageNumber"
      :page-sizes="[10,20, 50, 100, 500]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
    <el-dialog title="添加闪购" width="30%" :visible="showdialog == 'add'" :before-close="handleAddClose">
      <el-form :inline="false" label-position="left" :model="addData" ref="addFlashPromotion" label-width="68px" size="small" >
        <el-form-item label="名称" prop="name">
          <el-input v-model="addData.name" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
           <el-date-picker
            v-model="addData.startTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择开始日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-date-picker
            v-model="addData.endTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择结束日期">
            </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = '';clearAddData()">取 消</el-button>
        <el-button type="primary" @click="addFlashPromotion">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="对应闪购时间段" width="30%" :visible="showdialog == 'showSession'" :before-close="handleshowSessionClose">
       <el-table :data="flashPromotionSessions" style="width: 100%" :height="578">
        <el-table-column prop="name" label="名称">
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间">
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间">
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="editFlashPromotionCommotidy(scope.row.id)">编辑该时段商品</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="闪购商品" width="30%" :visible="showdialog == 'showChooseCommodity'" :before-close="handleShowChooseCommodityClose">

      <el-tag
        v-for="flashPromotionCommodity in flashPromotionCommoditys"
        :key="flashPromotionCommodity.id"
        closable
        type="success">
        {{flashPromotionCommodity.commodityName + '(' + flashPromotionCommodity.commoditySkuDetailDTO.attrStr + ')'}}
      </el-tag>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/config/server.js'
export default {
  data () {
    return {
      listData: [],
      searchData: {
      },
      page: {
        pageNumber: 1,
        pageSize: 10,
        total: 0,
        totalPage: 0
      },
      showdialog: '',
      addData: [],
      flashPromotionSessions: [],
      currentFlashPromotionId: null,
      flashPromotionCommoditys: []
    }
  },
  created () {
    this.search()
  },
  methods: {
    search () {
      api.flashPromotionList({
        page: this.page.pageNumber - 1,
        size: this.page.pageSize,
        name: this.searchData.name,
        description: this.searchData.description
      }).then((res) => {
        this.listData = res.result.content
        this.page.pageNumber = res.result.pageable.pageNumber + 1
        this.page.pageSize = res.result.pageable.pageSize
        this.page.total = res.result.totalElements
        this.page.totalPage = res.result.totalPages
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.search()
    },
    handleCurrentChange (val) {
      this.page.pageNumber = val
      this.search()
    },
    currentPage () {

    },
    handleAddFlashPromotion () {
      this.showdialog = 'add'
    },
    handleAddClose () {
      this.showdialog = ''
      this.clearAddData()
    },
    clearAddData () {
      this.addData = []
    },
    addFlashPromotion () {
      console.log(this.addData)
      this.addData.status = 1
      api.addFlashPromotionList(this.addData).then((res) => {
        console.log(res)
        if (res.ret === 1) {
          this.handleAddClose()
          this.search()
        }
      })
    },
    showFlashPromotionSessions (id) {
      api.flashPromotionSessionList().then((res) => {
        if (res.ret === 1) {
          this.currentFlashPromotionId = id
          this.showdialog = 'showSession'
          this.flashPromotionSessions = res.result
        }
      })
    },
    handleshowSessionClose () {
      this.showdialog = ''
    },
    editFlashPromotionCommotidy (flashPromotionSessionId) {
      api.flashPromotionCommodityList({
        flashPromotionId: this.currentFlashPromotionId,
        flashPromotionSessionId: flashPromotionSessionId,
        page: 0,
        size: 100
      }).then((res) => {
        if (res.ret === 1) {
          this.showdialog = 'showChooseCommodity'
          this.flashPromotionCommoditys = res.result.content
        }
      })
    },
    handleShowChooseCommodityClose () {
      this.showdialog = ''
    }
  }
}
</script>

<style lang="scss" scoped>
  .container{
    padding: 10px 0 0 0 ;
  }
  .search{
    .el-form{
      width:100%;
      display:flex;
      flex-direction:row;
      justify-content:flex-start;
      flex-wrap:wrap;
      .el-form-item{
        width: 270px;
      }
    }
    width:100%;
  }
  .operation{
    margin-top:10px;
    float: left;
  }
  .el-tree{
    width:200px;
  }

</style>>
